<template>
    <div class="bigmiddiv bgwhite bordergray">
        <!-- <el-input v-model="search" style="width: 240px" placeholder="" />
      <el-button type="primary">搜索</el-button> -->
        <el-input v-model="search" class="searchinput" style="width: 731px;" placeholder="请输入标项名称等关键词，例如：理疗设备">
            <template #append>
                <el-button type="primary" class="searchprimary">搜索</el-button>
            </template>
        </el-input>
    </div>
    <!--  -->
    <section class="bigmiddiv bgwhite" :class="[downUpStyle ? 'downUpStyle' : '']">
        <div class="flex searchitem">
            <span class="leftgray">已选条件:</span>
            <div class="flexbewteen searchtj">
                <span>默认</span>
                <div class="blue flex" @click="clearFun">

                    <el-icon>
                        <Delete />
                    </el-icon>

                    <span>清空</span>
                </div>
            </div>
        </div>
        <div class="flex searchitem">
            <span class="leftgray">大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:</span>
            <div class="righticon">
                <span v-for="(item, index) in bigarea" @click="bigAreaSearch(index)"
                    :class="[item.choose ? 'active' : '', 'itemspan']" :key="item.name">{{
                        item.name }}</span>
            </div>

        </div>
        <div class="flex searchitem">
            <span class="leftgray">省&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份:</span>
            <div class="righticon">
                <span v-for="(item, index) in shengArry" @click="shengSearch(index)"
                    :class="[item.choose ? 'active' : '', 'itemspan']" :key="item.name">{{
                        item.name }}</span>
            </div>
        </div>
        <div class="flex searchitem">
            <span class="leftgray">中标日期:</span>
            <div class="righticon">
                <span v-for="(item, index) in zbArry" @click="zbSearch(index)"
                    :class="[zbIndex == index ? 'active' : '', 'itemspan']" :key="item.name">{{
                        item.name }}</span>
                <span class="itemspan">自定义</span>
                <el-date-picker v-model="time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
                    format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
            </div>
        </div>
        <!-- 高级展开盒子 -->
        <div>
            <div class="flex searchitem">
                <span class="leftgray">更多筛选:</span>
                <div class="flexbewteen searchtj">
                    <el-cascader placeholder="行业" :options="options" :props="props" clearable />
                    <!-- <el-dropdown>
                        <span class="el-dropdown-link flex">

                            行业<el-icon class="el-icon--right">
                                <CaretBottom />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>Action 1</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown> -->
                    <div class="leftgray flex" @click="heightHandle">
                        <span>高级</span>
                        <img :class="['doubledown', showSearch ? 'activeroute' : '']"
                            src="@/assets/images/doubledown.png" alt="">
                    </div>
                </div>
            </div>


            <section :class="['tallbox', showSearch ? 'heightStyle' : '']">

                <!-- :rules="rulesg" -->
                <el-form :label-width="75" ref="ruleFormRefg" :model="ruleFormg" label-width="auto"
                    class="demo-ruleForm" :size="formSize" status-icon>

                    <div class="flexbewteen formtitle">
                        <b class="boldb">精确查找</b>
                        <div class="flex">
                            <el-button size="small" @click="resetFormg(ruleFormRefg)">条件重置</el-button>
                            <el-button size="small" type="primary" @click="submitFormg(ruleFormRef)">
                                条件筛选
                            </el-button>

                        </div>
                    </div>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="标项名称:" prop="bxname">
                                <el-input v-model="ruleFormg.bxname" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="货物名称:" prop="hwname">
                                <el-input v-model="ruleFormg.hwname" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="货物品牌:" prop="hwbrand">
                                <el-input v-model="ruleFormg.hwbrand" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="货物信号:" prop="hwxh">
                                <el-input v-model="ruleFormg.hwxh" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="招标单位:" prop="zhaobdw">
                                <el-input v-model="ruleFormg.zhaobdw" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="中标单位:" prop="zhongbdw">
                                <el-input v-model="ruleFormg.zhongbdw" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="代理机构:" prop="dljg">
                                <el-input v-model="ruleFormg.dljg" placeholder="请输入关键词" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="价格区间:">
                                <el-input v-model="ruleFormg.miniPrice" style="width: 80px;" placeholder="最小金额" />
                                <img class="Vector" src="@/assets/images/Vector.png" alt="">
                                <el-input v-model="ruleFormg.maxPrice" style="width: 80px;" placeholder="最大金额" />
                            </el-form-item>
                        </el-col>


                    </el-row>

                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="排除词:" prop="outClude">
                                <el-input v-model="ruleFormg.outClude" placeholder="排除词" />
                            </el-form-item>
                        </el-col>
                    </el-row>


                </el-form>


            </section>

        </div>


    </section>
    <div class="center">
        <el-icon :class="['iconupdown', downUpStyle ? 'activeroute' : '']" @click="downUpSlider">
            <ArrowDown />
        </el-icon>
    </div>


    <div class="bigmiddiv bgwhite logocon">
        <div class="center">
            <img class="logoimg" src="@/assets/images/logoimg.png" alt="">

            <el-button class="loginbtn" type="primary" @click="dialogFormVisible = true">登录</el-button>
        </div>
        <el-dialog v-model="dialogFormVisible" width="500">
            <div class="center">

                <img class="logotitle" src="@/assets/images/logotitle.png" alt="">
            </div>
            <el-form ref="ruleFormRef" :rules="rules" label-position="top" :model="form">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="form.name" placeholder="请输入手机号/用户账号" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入手机号/用户账号" autocomplete="off" />
                </el-form-item>
                <div class="center">
                    <el-button class="loginbtn" type="primary" @click="submitForm(ruleFormRef)">
                        登录/注册
                    </el-button>
                </div>

            </el-form>

        </el-dialog>
    </div>
    <div class="bigmiddiv  tablecon">
        <!-- {{ multipleSelection }} -->
        <div class="tabletitle flexbewteen">
            <section class="lefttitle">
                搜索到 <b>43301915</b> 条信息 最低价:<span>￥254500</span> 最高价:<span>￥520500</span> 平均价:<span>￥254.3500</span>
            </section>
            <section class="flex">
                <span @click="manyExport" class="manyExport">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    批量导出</span>
                <span @click="manyCollect">
                    <el-icon>
                        <Star />
                    </el-icon>
                    标讯收藏
                </span>

            </section>
        </div>
        <el-table @row-click="rowClick" ref="multipleTableRef" border :data="tableData" row-key="id" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="招标名称" width="120">
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" label="货物名称" width="120" />
            <el-table-column property="address" label="货物品牌" />
            <el-table-column property="address" label="规格型号" />
            <el-table-column property="address" label="单价" />
            <el-table-column property="address" label="招标单位" />
            <el-table-column property="address" label="中标日期" />
            <el-table-column property="start" label="搜藏">
                <template #default="scope">




                    <el-popover  v-if="scope.row.start == 0" width="300" class="popovercon" :ref="setRef" placement="top" trigger="click">
                        <div class="flexbewteen">
                            <el-input style="width: 200px;"></el-input><el-text type="primary">添加并使用</el-text>
                        </div>
                        <div class="popovercon">
                            <span class="itemspan">标签1</span>
                            <span class="itemspan">标签1</span>
                            <span class="itemspan">标签1</span>
                            <span class="itemspan">标签1</span>
                            <span class="itemspan">标签1</span>
                            <span class="itemspan">标签1</span>
                            <span class="itemspan">标签1</span>
                            <span class="itemspan">标签1</span>
                            <span class="itemspan">标签1</span>
                        </div>

                        <div style="text-align: center; margin: 10px">
                            <el-button size="small" text
                                @click="handClick(scope.row.start, scope.$index)">暂不添加</el-button>
                            <el-button size="small" type="primary" @click="handClick(scope.row.start, scope.$index)">
                                确定添加</el-button>
                        </div>
                        <template #reference>


                            <el-icon
                                @click="(event) => showPopover(event, scope.row.start, scope.$index)">
                                <Star />
                            </el-icon>



                        </template>
                    </el-popover>


                    <el-icon color="#F9AE08" size="18" v-if="scope.row.start == 1"
                        @click="(event) => showPopover(event, scope.row.start, scope.$index)">
                        <StarFilled />

                    </el-icon>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pagination" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :background="true" size="small" :disabled="disabled"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>

</template>
<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import {useRoute,useRouter} from "vue-router";
const route=useRoute();
const router=useRouter()
const search = ref("");
const visible = ref(false)
// 下面是行业
const props = { multiple: true }

const options = [
    {
        value: 1,
        label: '一级',
        children: [
            {
                value: 2,
                label: '二级1',
                children: [
                    { value: 3, label: '31' },
                    { value: 4, label: '32' },
                    { value: 5, label: '33' },
                ],
            },
            {
                value: 6,
                label: '二级2',
                children: [
                    { value: 7, label: '34' },
                    { value: 8, label: '35' },
                    { value: 9, label: '36' },
                ],
            },
            {
                value: 10,
                label: '二级3',
                children: [
                    { value: 11, label: '37' },
                    { value: 12, label: '38' },
                    { value: 13, label: '39' },
                ],
            },
        ],
    },

]

const bigIndex = ref(0)
const bigarea = ref([
    {
        name: "全部",
        choose: true
    },
    {
        name: "东北",
        choose: false
    },
    {
        name: "华北",
        choose: false
    },
    {
        name: "华东",
        choose: false
    },
    {
        name: "华南",
        choose: false
    },
    {
        name: "西北",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    }
])
const bigAreaSearch = (index) => {
    bigarea.value[index].choose = !bigarea.value[index].choose

}


const shengIndex = ref(0)
const shengArry = ref([
    {
        name: "全部",
        choose: true
    },
    {
        name: "河北",
        choose: false
    },
    {
        name: "山西",
        choose: false
    },
    {
        name: "内蒙古",
        choose: false
    },
    {
        name: "北京",
        choose: false
    },
    {
        name: "天津",
        choose: false
    },
    {
        name: "辽宁",
        choose: false
    },
    {
        name: "吉林",
        choose: false
    },
    {
        name: "黑龙江",
        choose: false
    },
    {
        name: "上海",
        choose: false
    },
    {
        name: "江苏",
        choose: false
    },
    {
        name: "浙江",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    }
])
const shengSearch = (index) => {
    shengArry.value[index].choose = !shengArry.value[index].choose
}


const zbIndex = ref(0)
const zbArry = [
    {
        name: "全部"
    },
    {
        name: "最近7天"
    },
    {
        name: "最近30天"
    },
    {
        name: "最近1年"
    },

]
const zbSearch = (index) => {
    zbIndex.value = index
}

const time = ref("");
// 清空所有状态
const clearFun = () => {
    // bigIndex.value = 0;
    // shengIndex.value = 0;
    bigarea.value.map(item => { item.choose = false })
    shengArry.value.map(item => { item.choose = false })
    zbIndex.value = 0;
}

// 下面是登录弹窗
const dialogFormVisible = ref(false)
const form = reactive({
    name: '',
    password: ""
})
const ruleFormRef = ref(null)
const rules = reactive({
    name: [
        { required: true, message: "用户名不能为空", trigger: 'blur' },
    ],
    password: [
        { required: true, message: "密码不能为空", trigger: 'blur' },
    ],

})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 下面是高级查询js代码
const formSize = ref('default')
const ruleFormRefg = ref()
const ruleFormg = reactive({
    bxname: '',//标项名称
    hwname: "",//货物名称
    hwbrand: "",//货物品牌
    hwxh: "",//货物信号

    zhaobdw: "",//招标单位
    zhongbdw: "",//中标单位
    dljg: "",//代理机构
    miniPrice: "",//最小金额-价格区间
    maxPrice: "",//最大金额-价格区间
    outClude: "",//排除词
})



const rulesg = reactive({//验证高级规则
    bxname: [
        { required: true, message: '不能为空', trigger: 'blur' },

    ],
    hwname: [
        { required: true, message: '不能为空', trigger: 'blur' },

    ],
    hwbrand: [
        { required: true, message: '不能为空', trigger: 'blur' },

    ],
    hwxh: [
        { required: true, message: '不能为空', trigger: 'blur' },

    ],
    zhaobdw: [{ required: true, message: '不能为空', trigger: 'blur' }],//招标单位
    zhongbdw: [{ required: true, message: '不能为空', trigger: 'blur' }],//中标单位
    dljg: [{ required: true, message: '不能为空', trigger: 'blur' }],//代理机构
    miniPrice: [{ required: true, message: '不能为空', trigger: 'blur' }],//最小金额-价格区间
    maxPrice: [{ required: true, message: '不能为空', trigger: 'blur' }],//最大金额-价格区间
    outClude: [
        // { required: true, message: '不能为空', trigger: 'blur' },
        { max: 3, message: '最多3个关键词', trigger: 'blur' }
    ],//排除词


})

const submitFormg = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetFormg = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}


// 下面是高级的单机事件
const showSearch = ref(false);
const heightHandle = () => {
    showSearch.value = !showSearch.value
}

// 隐藏所有的条件
const downUpStyle = ref(false)
const downUpSlider = () => {
    downUpStyle.value = !downUpStyle.value
}
// 下面是表格的样式
const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
const tableData = ref([
    {
        id: 1,
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        start: 0
    },
    {
        id: 2,
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        start: 1
    },
    {
        id: 3,
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        start: 1
    }

])
//单机行
const rowClick = (row) => {
    console.log(row.id);//跳转页面
    router.push("/zbdesc")

}

// 批量导出
const manyExport = () => {
    if (multipleSelection.value.length == 0) {

        ElMessage.error('请选择标讯')
        return false
    }
    // 插件导出excel
}
const manyCollect = () => {
    if (multipleSelection.value.length == 0) {

        ElMessage.error('请选择标讯')
        return false
    }

}


const divRefs = ref([]);

const setRef = (el) => {
    if (el) divRefs.value.push(el);
};
const showPopover = (event, start, index) => {
    if (start == 0) {

        event.stopPropagation()
        return false
    }


    // divRefs.value[index].show()
}
const handClick = (start, index) => {
    console.log(start, index);
    if (start == 0) {
        ElMessage({
            message: '收藏成功',
            type: 'success',
            plain: true,
        })
    } else {
        ElMessage({
            message: '取消收藏',
            type: 'success',
            plain: true,
        })
    }
    // tableData.value[index].start=start==1?0:1
    tableData.value[index].start = start == 1 ? 0 : 1

    divRefs.value[index].hide()





}

// 下面是  const myRef = ref(null);
const currentPage4 = ref(1)
const pageSize4 = ref(100)
const disabled = ref(false)
const total = ref(400)
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}
</script>
<style scoped lang="scss">
.logocon {
    // text-align: center;
    margin-top: 30px;

    .logoimg {
        display: block;
        margin: 0 auto;
        width: 662px;
        margin-bottom: 20px;
    }

    .loginbtn {
        width: 223px;
    }

}

.logotitle {
    width: 145px;
    height: 45px;
    margin-bottom: 20px;
}


.searchinput {
    border: 1px solid #3873FF;
    border-right: 0;
    border-radius: 4px;

    .el-input__wrapper {
        border: 0 !important;
    }
    .searchprimary {
    background: #3873FF !important;
    color: white !important;
}

}

.leftgray {
    color: #888B98;
    font-size: 14px;
    width: 80px;
}

.righticon {
    flex: 1;
}

.searchitem {
    margin-bottom: 22px;
    flex-wrap: wrap;
    align-items: flex-start;

    .itemspan {
        background: none;
        padding: 2px 8px;
        margin-right: 10px;
        border-radius: 4px;
        display: inline-block;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .active {
        background: #3873FF !important;
        color: white !important;
    }

}

.searchtj {
    flex: 1;
}

.blue {
    color: #3873FF;

}

.tallbox {
    border-radius: 8px;
    background: #FAFAFA;
    padding: 24px;
    display: none;
}

.heightStyle {
    display: block;
}

.boldb {
    font-weight: bold;
}

.formtitle {
    margin-bottom: 20px;
}

.doubledown {
    width: 16px;
    height: 16px;
}

.activeroute {
    transform: rotate(180deg);
}

.Vector {
    width: 14px;
    height: 4px;
    margin: 0 4px;
}

.iconupdown {
    position: relative;
    top: -9px;
    font-size: 20px;
    background: white;
    // padding: 5px 20px;
    border-radius: 10px;
    display: inline-block;
    width: 60px;
}

.downUpStyle {
    display: none;
}

.tablecon {
    padding: 16px;
    background: white;

    .tabletitle {
        font-size: 14px;
        margin-bottom: 16px;

        b {
            font-weight: bold;

        }

        .lefttitle {
            span {
                color: #3873FF;
                font-weight: bold;
            }
        }

        .manyExport {
            margin-right: 20px;

        }

    }
}

.pagination {
    margin-top: 20px;
}

.popovercon {
    .itemspan {
        display: inline-block;
        padding: 3px;
        margin: 5px;
        border: 1px solid #f1f1f1;
        border-radius: 4px;
        cursor: pointer;
    }
}
</style>